<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>

    <style>
        .p::first-line {
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: underline;
        }

        /* 设置 p 元素的第一个字符的样式 */
        .p::first-letter {
            color: #ec1515;
            font-weight: 700;
        }

        .p::selection {
            color: greenyellow;
            background-color: orange;
            text-shadow: 1px 1px 2px rgb(255, 192, 192);
        }

        input::placeholder {
            color: grey;
            font-style: italic;
            opacity: 0.7;
        }

        /* li::marker {
            color: red;
            font-size: 20px;
        } */

        /* 使用 content 属性自定义标记 */
        .custom-mark::marker {
            content: "→ ";
            color: blue;
        }

        .list-item-div {
            display: list-item;
            margin-left: 50px;
            /* 增加一些左边距以留出标记的空间 */
            /* 尝试使用 ::marker 伪元素来样式化标记（视浏览器支持情况而定） */
            /* 注意：::marker 的支持度有限，这里仅作为示例 */
            counter-increment: custom-counter;
            /* 创建一个计数器 */
            list-style-type: none;
            /* 移除默认的列表样式 */
        }

        .list-item-div::marker {
            content: counter(custom-counter) ". ";
            /* 使用计数器作为标记的内容 */
            color: red;
            /* 将标记颜色设为红色 */
        }

        .custom-button {
            background-color: lightgray;
            border: 2px solid gray;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s, border-color 0.3s;
        }

        /* 当鼠标悬浮在按钮上 */
        .custom-button:hover {
            background-color: gray;
            color: white;
        }

        /* 当按钮获得焦点 */
        .custom-button:focus {
            border-color: blue;
            outline: none;
            /* 移除默认轮廓并用蓝色边框代替 */
        }

        /* 当按钮被激活（例如，被点击） */
        .custom-button:active {
            background-color: darkgray;
            border-color: darkblue;
        }

        section:target {
            background-color: lightblue;
        }

        #check-all:indeterminate {
            background-color: lightgray;
        }

        p:not(.exclude, .ignore) {
            color: red;
        }

        section .content-item:last-of-type {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p class="p">
        In warm ocean waters around the world, you may see a strange sight: A fish leaping from the water and soaring
        dozens
        of meters before returning to the ocean's depths. Early Mediterranean sailors thought these flying fish returned
        to
        the shore at night to sleep, and therefore called this family of marine fish Exocoetidae.
    </p>
    <input type="text" placeholder="请输入文本">
    <ul>
        <li>hhh</li>
        <li>hhh</li>
        <li>hhh</li>
        <li>hhh</li>
        <li class="custom-mark">hhh</li>
        <li class="custom-mark">hhh</li>
        <li class="custom-mark">hhh</li>
        <li class="custom-mark">hhh</li>
    </ul>
    <div class="list-item-div">这是第一个项目</div>
    <div class="list-item-div">这是第二个项目</div>
    <div class="list-item-div">这是第三个项目</div>

    <img src="./images/box.svg" usemap="#example-map">
    <map id="example-map">
        <area shape="rect" coords="34,44,270,350" href="http://example.com" alt="Example">
    </map>

    <button class="custom-button">点击我</button>

    <nav>
        <ul>
            <li><a href="#section1">第1节</a></li>
            <li><a href="#section2">第2节</a></li>
            <li><a href="#section3">第3节</a></li>
        </ul>
    </nav>

    <section id="section1">...</section>
    <section id="section2">...</section>
    <section id="section3">...</section>

    <input type="checkbox" id="check-all">
    <label for="check-all">全选/全不选</label>
    <input type="checkbox" id="parentCheckbox" />
    <progress id="progressBar" value="0" max="100" indeterminate></progress>

    <p>hhhh</p>
    <p class="exclude">hhhh</p>
    <p class="ignore">hhhh</p>
    <section>
        <h3>《静夜思》</h3>
        <small class="content-item">【唐】李白</small>
        <div>床前明月光，</div>
        <div class="content-item">疑是地上霜。</div>
        <p class="content-item">举头望明月，</p>
        <p>低头思故乡。</p>
    </section>
    <script>
        document.getElementById('check-all').indeterminate = true;
        // 假设有逻辑来确定子项是否被全部选中  
        // 如果部分选中，设置 indeterminate 为 true  
        document.getElementById('parentCheckbox').indeterminate = true;

        // 当子项的状态变化时，可能需要更新父级复选框的状态  
        // 假设有一个函数来更新这个状态  
        function updateParentCheckbox() {
            // 根据子项是否被全部选中，设置 indeterminate 或 checked/unchecked  
        }

        // 当你知道具体的进度时，可以移除 indeterminate 属性并更新 value  
        // 假设有逻辑来获取任务的进度  
        function updateProgress(percentComplete) {
            var progressBar = document.getElementById('progressBar');
            progressBar.indeterminate = false; // 移除不确定状态  
            progressBar.value = percentComplete; // 更新进度  
        }  
    </script>
</body>

</html>
<!-- 
基本选择器：
    通配符选择器 *
    id选择器 #
    类名选择器 .
    标签选择器/元素选择器 div

属性选择器 [data] [data='aa'] [data~='aa'] [data|='aa']
            [data^='aa'] [data$='aa'] [data*='aa']

关系选择器

伪元素选择器 ::

伪类选择器 :

组合选择器  
    后代选择器 空格
    子元素选择器 >
    紧邻兄弟选择器 +
    兄弟选择器 ~
    无空格组合选择器
    逗号分隔的选择器 ，

选择器的优先级
    !important关键字 内联样式 id选择器100 类选择器10 属性选择器10  伪类选择器10
    标签选择器1 伪元素选择器1

    兄弟选择器: 权重为0
    
    子选择器: 权重为0
    
    后代选择器: 权重为0
    
    通配符选择器: 权重为0

-->